<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>北京科技报</title>
		<link href="css/topic.css" rel="stylesheet">
		<link href="css/common.css" rel="stylesheet">
		<link href="css/header.css" rel="stylesheet">
        <link href="css/bookstarp.css" rel="stylesheet">
		<script src="js/vue.js"></script>
    </head>
    <body>
        <div id="vue_det" v-on:click="status_type = 1">
            <div class="header-box">
				<div class="header flex align-end">
					<div class="flex-one">
						<img class="header-logo" src="images/logoff.png" />
						<div class="font-12 color-ff">聚焦科学传播 弘扬科学精神</div>
					</div>
					<div class="header-search-btn">
						<img class="header-search" src="images/search.png" />
					</div>
				</div>
				<div class="position-relative">
					<div class="header-status-box">
						<div class="header-status">
							<div><a href="index.html">首页</a></div>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 2">
							<a class="flex align-center">
								<div>要闻</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 2}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 3">
							<a class="flex align-center">
								<div>解读</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 3}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 4">
							<a class="flex align-center">
								<div>科创</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 4}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 5">
							<a class="flex align-center">
								<div>科普</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 5}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 6">
							<a class="flex align-center">
								<div>科教</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 6}"
									src="images/down.png" />
							</a>
						</div>
                        <div class="header-status">
							<div class="color-main">专题</div>
							<div class="header-line"></div>
						</div>
					</div>

					<!-- 下拉内容 -->
					<div class="header-content-box" v-if="status_type!=1">
						<div class="container">
							<div class="row">
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
            <div class="box margin-top-120">
                <div id="container" class="container">
                    <div class="margin-bottom-24">
                        <a href="">
                            <img class="list-img" src="images/app.png">
                            <div class="flex align-center margin-top-10">
                                <div class="list-span">专题</div>
                                <div class="flex-one font-15 text-cut-one margin-left-14 margin-top-2">2024中关村论坛 | 探寻新质生产力探寻新质生产力探寻新质生产力</div>
                            </div>
                        </a>
                    </div>
                    <div class="margin-bottom-24">
                        <a href="">
                            <img class="list-img" src="images/app.png">
                            <div class="flex align-center margin-top-10">
                                <div class="list-span">专题</div>
                                <div class="flex-one font-15 text-cut-one margin-left-14 margin-top-2">2024中关村论坛 | 探寻新质生产力探寻新质生产力探寻新质生产力</div>
                            </div>
                        </a>
                    </div>
                    <div class="margin-bottom-24">
                        <a href="">
                            <img class="list-img" src="images/app.png">
                            <div class="flex align-center margin-top-10">
                                <div class="list-span">专题</div>
                                <div class="flex-one font-15 text-cut-one margin-left-14 margin-top-2">2024中关村论坛 | 探寻新质生产力探寻新质生产力探寻新质生产力</div>
                            </div>
                        </a>
                    </div>
                    <div class="margin-bottom-24">
                        <a href="">
                            <img class="list-img" src="images/app.png">
                            <div class="flex align-center margin-top-10">
                                <div class="list-span">专题</div>
                                <div class="flex-one font-15 text-cut-one margin-left-14 margin-top-2">2024中关村论坛 | 探寻新质生产力探寻新质生产力探寻新质生产力</div>
                            </div>
                        </a>
                    </div>
                    <div class="margin-bottom-24">
                        <a href="">
                            <img class="list-img" src="images/app.png">
                            <div class="flex align-center margin-top-10">
                                <div class="list-span">专题</div>
                                <div class="flex-one font-15 text-cut-one margin-left-14 margin-top-2">2024中关村论坛 | 探寻新质生产力探寻新质生产力探寻新质生产力</div>
                            </div>
                        </a>
                    </div>
                </div>
			    <div class="text-center font-14 margin-top-14" style="color: #9CA5AD;">{{isLoading?'加载中':'滑动加载更多'}}</div>
            </div>
        </div>
    </body>
</html>


<script>
	var vm = new Vue({
		el: '#vue_det',
		data: {
			status_type: 1,
			isLoading: false
		},
		mounted: function() {
            window.addEventListener('scroll', () => {
			  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
			  if (clientHeight + scrollTop >= scrollHeight - 5 && !this.isLoading) { // 5是个阈值，控制距离底部时加载
				this.loadMore();
			  }
			});
        },
		methods: {
			loadMore: function() {
			  this.isLoading = true;
			  setTimeout(() => {
				  console.log(123)
				  // 获取容器元素
				  var container = document.getElementById("container");
				  // 创建一个新的div元素
				  var newDiv = document.createElement("div");
				  // 设置div的内容
				  newDiv.innerHTML = '<div class="margin-bottom-24"><a href=""><img class="list-img" src="images/app.png"><div class="flex align-center margin-top-10"><div class="list-span">专题</div><div class="flex-one font-15 text-cut-one margin-left-14 margin-top-2">2024中关村论坛 | 探寻新质生产力探寻新质生产力探寻新质生产力</div></div></a></div>';
					// 将新创建的div添加到容器的最后
					container.appendChild(newDiv);
				
				this.isLoading = false;
			  }, 500); // 模拟异步加载数据
			}
		}
	})
</script>